<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                placeholder="请选择所属单位"
                style="width: 145px"
                :disabled="localTypeUnit != '1'"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">排班周期：</label>
            <el-date-picker
                style="width: 260px"
                v-model="searchForm.dateTime"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :size="'default'"
                :shortcuts="shortcuts"
            />
        </div>
        <div class="filter-item">
            <el-button
                size="default"
                type="primary"
                @click="search"
            >查询</el-button>
            <el-button
                size="default"
                type="info"
                @click="reset"
            >重置</el-button>
            <el-button
                size="default"
                type="success"
                @click="exportList"
            >导出</el-button>
        </div>
    </div>

    <el-table
        :data="tableData"
        style="width: 100%"
        border
    >
        <el-table-column
            type="index"
            label="序号"
            width="55"
        />
        <el-table-column
            prop="depId"
            label="所属单位"
        >
            <template #default="scope">
                {{ depNameTranslate(scope.row.depId) }}
            </template>
        </el-table-column>
        <!-- <el-table-column prop="name" label="操作类型" /> -->
        <el-table-column
            prop="planTime"
            label="排班日期"
        />
        <el-table-column
            prop="userId"
            label="调整对象"
        >
            <template #default="scope">
                {{ userIdTranslate(scope.row.userId) }}
            </template>
        </el-table-column>
        <el-table-column
            prop="planClassHisNames"
            label="调整内容"
        >
            <template #default="scope">
                原班次：{{ scope.row.planClassHisNames }} <br />现班次：{{
                    scope.row.planClassNames
                }}</template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="操作日期"
        />
        <el-table-column
            prop="operatorName"
            label="操作人"
        />
    </el-table>

    <el-pagination
        v-model:current-page="searchForm.pageNo"
        v-model:page-size="searchForm.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="paginationStyle"
    />
</template>
<script setup>
import schedulingHttp from "@/https/scheduling.js";
import userHttp from "@/https/user.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import moment from "moment";
import { onMounted, reactive, ref } from "vue";
let searchForm = reactive({
    depId: "",
    dateTime: "",
    pageNo: 1,
    pageSize: 10,
});
const depIdList = ref([
    { label: "全部", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const depNameTranslate = (depId) => {
    let depName = "";
    depIdList.value.forEach((item) => {
        if (item.value == depId) {
            depName = item.label;
        }
    });
    return depName;
};
const localTypeUnit = ref(Storage.localGet("depId"));
searchForm.depId = localTypeUnit.value;

const shortcuts = [
    {
        text: "本年",
        value: () => {
            return [
                moment().startOf("year"),
                moment().endOf("year"),
            ];
        },
    },
    {
        text: "本月",
        value: () => {
            return [
                moment().startOf("month"),
                moment().endOf("month"),
            ];
        },
    },
    {
        text: "下月",
        value: () => {
            return [
                moment().add(1, 'month').startOf("month"),
                moment().add(1, 'month').endOf("month"),
            ];
        },
    },
    {
        text: "本周",
        value: () => {
            return [
                moment().startOf("week"),
                moment().endOf("week"),
            ];
        },
    },
    {
        text: "下周",
        value: () => {
            return [
                moment().add(1, 'week').startOf("week"),
                moment().add(1, 'week').endOf("week"),
            ];
        },
    },
    {
        text: "本日",
        value: () => {
            return [
                moment(),
                moment(),
            ];
        },
    },
];
const tableData = ref([]);
const userList = ref([]);

const userQueryUserList = async () => {
    let params = {
        isDelete: 0,
        pageNo: 1,
        pageSize: 10000,
    };
    const res = await userHttp.userQueryUserList(params);
    if (res.data.code == 200) {
        userList.value = res.data.data.records;
    }
};
const userIdTranslate = (userId) => {
    let userName = "";
    userList.value.forEach((item) => {
        if (item.id == userId) {
            userName = item.realName;
        }
    });
    return userName;
};

let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
const search = () => {
    let obj = {
        ...searchForm,
        startTime: searchForm.dateTime[0]
            ? moment(searchForm.dateTime[0]).format("YYYY-MM-DD")
            : "",
        endTime: searchForm.dateTime[0]
            ? moment(searchForm.dateTime[1]).format("YYYY-MM-DD")
            : "",
    };
    let params = searchForm.dateTime ? obj : searchForm;

    schedulingHttp.workPlanQueryAdjustmentRecordPage(params).then((res) => {
        if (res.data.code == 200) {
            tableData.value = res.data.data.records;
            total.value = res.data.data.total;
        }
    });
};
const reset = () => {
    searchForm = {
        depId: localTypeUnit.value,
        dateTime: "",
        pageNo: 1,
        pageSize: 10,
    };
    search();
};
const exportList = () => {
    let obj = {
        ...searchForm,
        startTime: searchForm.dateTime[0]
            ? moment(searchForm.dateTime[0]).format("YYYY-MM-DD")
            : "",
        endTime: searchForm.dateTime[1]
            ? moment(searchForm.dateTime[1]).format("YYYY-MM-DD")
            : "",
    };
    let params = searchForm.dateTime ? obj : searchForm;

    schedulingHttp.workPlanExportAdjustmentRecord(params).then((response) => {
        const content = response.data;
        const blob = new Blob([content], { type: "application/ms-excel" });
        let fileName = `调班记录.xls`;
        if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
        }
    });
};
onMounted(() => {
    userQueryUserList();
    search();
});
</script>

<style scoped lang="less">
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
</style>